<script>
	import { cubicOut } from 'svelte/easing';
	let numbers = [1, 2, 3, 4];
	function addNumber() {
		numbers = [...numbers, numbers.length + 1];
	}
	$: sum = numbers.reduce((t, n) => t + n, 0);

	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 1080}deg);`
		};
	}
</script>

<!-- <div class="py-5 my-5 bg-gray-200 rounded-lg "> -->
<p>animate自定义动画 为什么没有效果</p>
<p>{numbers.join(' + ')} = {sum}</p>

<button class="p-5 bg-yellow-300" on:click={addNumber}>添加数字</button>

{#each numbers as item, index (item)}
	<div class="flex justify-center w-full my-2 text-yellow-800 bg-blue-300" animate:whizz>
		{item}
	</div>
{/each}
<!-- </div> -->
